<template>
  <div class="pages deposit-margin">
    <div class="pageLevel" v-if="!sub">
      <!-- 搜索框 -->
      <div class="tableSearch">
        <el-form>
          <el-row :gutter="10">
            <el-col style="width: 280px">
              <el-form-item label="门店:" label-width="100px">
                <el-select filterable size="small" style="width:180px" v-model="selectdata.storeId" placeholder="全部">
                  <el-option v-for="(item,index) in storeLists" :key="index" :label="item.name" :value="item.id"> </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col style="width: 250px">
              <el-form-item label="" label-width="100px">
                <el-button type="primary" size="mini" @click="searchSelect" class="Button">查询</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <!-- 表格 -->
      <div class="tableMain">
        <p class="totalAmountStyle">保证金金额: {{totalAmount}}</p>
        <el-table :data="dataList" stripe style="width: 100%">
          <el-table-column type="index" label="序号" align="center" width="50"></el-table-column>
          <el-table-column prop="shopName" label="门店" align="center"></el-table-column>
          <el-table-column prop="depositPrice" label="保证金金额" align="center"></el-table-column>
          <el-table-column prop="reckonDepositPrice" label="储值余额" align="center"></el-table-column>
          <el-table-column align="center" label="操作" width="180" v-if="setRole('明细')">
            <template slot-scope="scope">
              <el-button size="small" @click="routerPush(scope.row.shopId)" type="text" class="addDetail">明细</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 页码 -->
        <div class="pageblock">
          <el-button size="small" type="primary" class="topage" @click="toPage">确定</el-button>
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10,20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalItems">
          </el-pagination>
        </div>
      </div>
    </div>
    <div class="pageLevel" v-else>
      <router-view></router-view>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
import util from "@/util";
import { depositPriceDetailList, selectBaseShopPageList } from "@/api";
var fileDownload = require("js-file-download");
export default {
  computed: mapState(["sub", "merchantId", "power"]),
  data() {
    return {
      storeLists: [], // 门店列表
      selectdata: {
        storeId: "" // 门店
      },
      dataList: [], //列表数据
      //   分页
      pageSize: 10,
      totalItems: 0,
      currentPage: 1,
      exportData: {},
      totalAmount: "0"
    };
  },
  watch: {
    sub: {
      handler: function(val, oldVal) {
        if (oldVal != null && val == false) {
        }
      },
      deep: true
    }
  },
  mounted() {
    this.warehouseList();
    this.tableget(this.pageSize, this.currentPage);
  },
  methods: {
    routerPush(shopId) {
      util.routerTo("/data-center/deposit-margin/depositMargin-info", {
        orgId: shopId
      });
    },
    setRole(key) {
      return util.selectTitle(this.power, key);
    },
    // 获取表格数据
    tableget(pageSize, pageNum) {
      let dailySales = {
        shopId: this.selectdata.storeId,
        companyId: this.merchantId,
        pageNum: pageNum,
        pageSize: pageSize
      };
      this.exportData = {
        shopId: this.selectdata.storeId,
        companyId: this.merchantId
      };
      depositPriceDetailList(dailySales).then(res => {
        this.dataList = res.data.depositPriceList;
        this.totalItems = res.data.totalPage;
        this.totalAmount = res.data.totalAmount;
      });
    },
    // 搜索
    searchSelect() {
      this.tableget(this.pageSize, 1);
    },
    //跳页
    toPage() {
      this.tableget(this.pageSize, 1);
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage=1;
      this.tableget(val, this.currentPage);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.tableget(this.pageSize, val);
    },
    // 门店列表
    warehouseList() {
      selectBaseShopPageList({
        businessId: this.merchantId,
        type: 3
      }).then(res => {
        let a = {
          id: "",
          name: "全部"
        };
        res.data.list.unshift(a);
        this.storeLists = res.data.list;
      });
    }
  }
};
</script>
<style scoped>
.tableSearch .el-input {
  width: 190px;
}
.tableSearch .el-date-editor {
  width: 350px;
}
.totalAmountStyle {
  margin-bottom: 20px;
  font-size: 18px;
}
</style>
<style>
.outsourcingstatistics .delete .el-input__suffix {
  display: none;
}
.outsourcingstatistics .billdata .el-date-editor .el-range__close-icon {
  display: none;
}
.outsourcingstatistics .el-form-item {
  margin-bottom: 10px;
}
</style>



